<script>
import loginJs from "@/mixins/login.js"

export default {
  mixins: [loginJs],
  data() {
    return {
      userInfo: {
        username: '',
        password: ''
      },
      disabled: false
    }
  },
  render() {
    return (
      <div class="login-bg-qsh">
        <div class="logo">青山湖区智慧城管平台</div>
        <div class="login-box">
          <c-form>
            <c-form-item>
              <div class="title">欢迎登录</div>
            </c-form-item>
            <c-form-item class="username-form-item">
              <c-input
                v-model={this.userInfo.username}
                prefix-icon="bg-user"
                placeholder="请输入用户名"
                nativeOnKeydown={this.handleLogin.bind(this)}
              ></c-input>
            </c-form-item>
            <c-form-item class="pwd-form-item">
              <c-input
                v-model={this.userInfo.password}
                prefix-icon="bg-pwd"
                type="password"
                placeholder="请输入密码"
                nativeOnKeydown={this.handleLogin.bind(this)}
              ></c-input>
            </c-form-item>
            <c-form-item class="btn-form-item">
              <c-button
                disabled={this.disabled}
                on-click={this.handleLogin.bind(this, "userInfo")}
                nativeOnKeydown={this.handleLogin.bind(this)}
              >
                登 录
              </c-button>
            </c-form-item>
          </c-form>
        </div>
      </div>
    );
  }
}
</script>

<style lang="scss">
.login-bg-qsh {
  input:-internal-autofill-previewed,
  input:-internal-autofill-selected {
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s !important;
  }
  left: 0;
  right: 0;
  overflow-x: auto;
  width: 100%;
  height: 100%;
  position: fixed;
  background: url(~@/assets/images/qsh/bg-login.png) no-repeat center center
    fixed;
  background-size: 100% 100%;
  i {
    display: inline-block;
  }
  .logo {
    min-width: 580px;
    width: 100%;
    margin-top: 169px;
    display: flex;
    justify-content: center;
    font-size: 46px;
    font-family: HiraginoSansGB-W6, HiraginoSansGB;
    font-weight: normal;
    color: #fff;
    line-height: 46px;
    text-shadow: 0px 0px 10px #0057ff;
  }
  .login-box {
    min-width: 556px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    .title {
      font-size: 30px;
      font-family: HiraginoSansGB-W6, HiraginoSansGB;
      font-weight: normal;
      color: #fff;
      line-height: 46px;
      text-shadow: 0px 0px 10px #0057ff;
      text-align: center;
    }
    .el-form {
      padding-top: 20px;
      width: 556px;
      height: 510px;
      background: url(~@/assets/images/qsh/login-box.png) center no-repeat;
      margin: 0 auto;
      .el-form-item {
        width: 420px;
        height: 100px;
        margin: 10px auto 0;
        text-align: center;
        .el-form-item__content {
          margin-top: 18px;
          .el-input {
            height: 40px;
            line-height: 40px;
            border-radius: 20px;
            padding-left: 10px;
            background-color: rgba(3, 23, 46, 0.6);
            box-shadow: 0 0 1px #4b79fe;
            .el-input__inner {
              border: none;
              background: none;
              outline: none;
              border-radius: 0;
              height: 40px;
              font-size: 14px;
              font-family: MicrosoftYaHei-Bold;
              line-height: 28px;
              color: rgba(255, 255, 255, 1);
              opacity: 1;
            }
            .el-input__inner::placeholder {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #fff;
            }
            .el-input__prefix {
              left: 18px;
            }
            .bg-user {
              width: 16px;
              height: 16px;
              background: url(~@/assets/images/qsh/user.png) center no-repeat;
              vertical-align: middle;
            }
            .bg-pwd {
              width: 16px;
              height: 16px;
              background: url(~@/assets/images/qsh/pass.png) center no-repeat;
              vertical-align: middle;
            }
          }
        }
        .el-button {
          border: none;
          width: 210px;
          height: 40px;
          background-image: linear-gradient(90deg, #00c9ff 0%, #005aff 100%);
          font-size: 14px;
          font-family: MicrosoftYaHei-Bold;
          color: #fff;
          border-radius: 20px;
          opacity: 1;
        }
      }
    }
  }
  .other-login {
    min-width: 580px;
    width: 100%;
    height: 60px;
    div {
      margin: 0 auto;
      width: 400px;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
      p {
        margin: 0 20px;
        display: inline-block;
        cursor: pointer;
        .bg-ud {
          margin-right: 10px;
          width: 16px;
          height: 16px;
          background-position: -258px -270px;
          vertical-align: middle;
        }
        .bg-zzd {
          @extend .bg-ud;
          background-position: -186px -270px;
        }
        span {
          height: 20px;
          font-size: 14px;
          font-family: MicrosoftYaHei-Bold;
          color: rgba(0, 162, 254, 1);
        }
      }
    }
  }
}
</style>
